<template>
  <div class="note-edit">
    <!-- 主面板 -->
    <section class="main">
      <!-- 工具栏 -->
      <div class="toolbar">
        <input type="text" v-model="note.title" placeholder="标题" />
        <button class="favorite" @click="onFavoriteNote" title="收藏">
          <i
            class="iconfont"
            :class="{
              iconstar: note.favorite,
              'iconstar-border': !note.favorite,
            }"
          ></i>
        </button>
        <button class="delete" @click="onRemoveNote" title="删除">
          <i class="iconfont icondelete"></i>
        </button>
      </div>

      <!-- Markdown 源码输入区 -->
      <textarea
        @keyup="onEdit"
        @contextmenu="onContextMenu"
        v-model="note.content"
      ></textarea>

      <!-- 状态栏 -->
      <div class="toolbar status-bar">
        <span class="date">
          <span class="label">创建时间</span>
          <span class="value">{{ note.created | date }}</span>
        </span>
        <span class="lines">
          <span class="label">行数</span>
          <span class="value">{{ note.linesCount }}</span>
        </span>
        <span class="words">
          <span class="label">字数</span>
          <span class="value">{{ note.wordsCount }}</span>
        </span>
      </div>
    </section>

    <!-- 预览面板 -->
    <aside class="preview" v-html="note.preview"></aside>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from 'vue-property-decorator'
import Note from '@/Note'

@Component
export default class NoteEdit extends Vue {
  /** 处理的笔记 */
  @Prop() readonly note!: Note

  /**
   * 对当前笔记进行标星或取消标星
   * @listens
   * @fires NoteEdit#favorite
   */
  @Emit('favorite')
  onFavoriteNote() {}

  /**
   * 删除当前选中的笔记
   * @listens
   * @fires NoteEdit#remove
   */
  @Emit('remove')
  onRemoveNote() {}

  /**
   * 编辑
   * @listens
   * @fires NoteEdit#edit
   */
  @Emit('edit')
  onEdit() {}

  /**
   * 打开上下文菜单
   * @listens
   * @fires NoteEdit#contextmenu
   */
  @Emit('contextmenu')
  onContextMenu(e: Event) {
    e.preventDefault()
  }
}
</script>

<style lang="scss">
.preview {
  h1,
  h2,
  h3 {
    margin: 10px 0 4px;
    color: $base-color;
  }
  h1 {
    font-size: 2em;
  }
  h2 {
    font-size: 1.5em;
  }
  h3 {
    font-size: 1.2em;
  }
  h4 {
    font-size: 1.1em;
    font-weight: normal;
  }
  a {
    color: $base-color;
  }
}
</style>

<style lang="scss" scoped>
.note-edit {
  display: flex;
  flex-direction: row;

  textarea {
    resize: none;
    border: none;
    border-left: 1px solid #ccc;
    margin: 4px 0;
    padding: 4px 8px;
    font-family: monospace;
    flex: auto 1 1;
    overflow: auto;
  }

  .main,
  .preview {
    width: 50%;
    padding: 2px 4px;
  }
  .main {
    display: flex;
    flex-direction: column;
    .toolbar {
      > * {
        margin-right: 0.4em;
      }
    }
    .status-bar {
      color: #888;
      font-size: 75%;
      font-style: italic;
    }
  }
  .preview {
    margin: 4px 0;
    padding: 4px 8px;
    border-left: solid 1px #ccc;
    flex: auto 1 1;
    overflow: auto;
  }
}
</style>
